<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Az7pATeNW5vM8HmZXxDXyCCK0EeM22Hc"></script>
</head>
<body>
<div id="container" style="width: 960px"></div>
<script>
    var map; // 全局变量
    function initMap(){
        map = new BMap.Map("container", {coordsType: 5 });   // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。       // 创建地图实例
        var point = new BMap.Point(119.535, 39.917);  // 创建点坐标
        map.centerAndZoom(point, 16);                 // 初始化地图，设置中心点坐标和地图级别:3-19
        map.enableScrollWheelZoom(true);
        var navSite = {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type:  BMAP_NAVIGATION_CONTROL_LARGE,
            enableGeolocation: true
        };
        var navCtrl = new BMap.NavigationControl(navSite);
        map.addControl(navCtrl);
        var scaleSite = {
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMap.Size(20, 5)
        };
        var scaleCtrl = new BMap.ScaleControl(scaleSite);
        map.addControl(scaleCtrl);
        var typeSite = {
            anchor: BMAP_ANCHOR_TOP_LEFT,
            mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP]
        }
        map.addControl(new BMap.MapTypeControl(typeSite));
    }

    var markers = [
        {content:"电气工程学院",title:"电气学院",imageOffset: {width:0,height:3},position:{lat:39.91633,lng:119.528023}},
        {content:"艺术与设计学院",title:"艺术学院",imageOffset: {width:0,height:3},position:{lat:39.919671,lng:119.526132}},
        {content:"西校区大食堂",title:"西校区大食堂",imageOffset: {width:0,height:3},position:{lat:39.913788,lng:119.527179}},
        {content:"理学院",title:"理学院",imageOffset: {width:0,height:3},position:{lat:39.923604,lng:119.529124}},
        {content:"里仁教学楼",title:"里仁教学楼",imageOffset: {width:0,height:3},position:{lat:39.912532,lng:119.533435}},
        {content:"经管学院",title:"经管学院",imageOffset: {width:0,height:3},position:{lat:39.92075,lng:119.528091}},
        {content:"信息馆",title:"信息馆",imageOffset: {width:0,height:3},position:{lat:39.924727,lng:119.527938}},
        {content:"西区第三教学楼",title:"西区第三教学楼",imageOffset: {width:0,height:3},position:{lat:39.916552,lng:119.53013}},
        {content:"燕山大学图书馆",title:"燕山大学图书馆",imageOffset: {width:0,height:3},position:{lat:39.916365,lng:119.539526}},
        {content:"东区世纪楼",title:"东区世纪楼",imageOffset: {width:0,height:3},position:{lat:39.911097,lng:119.543834}},
        {content:"第一体育场",title:"第一体育场",imageOffset: {width:0,height:3},position:{lat:39.908731,lng:119.545181}},
        {content:"KFC",title:"KFC",imageOffset: {width:0,height:3},position:{lat:39.908419,lng:119.542953}},
        {content:"第二体育场",title:"第二体育场",imageOffset: {width:0,height:3},position:{lat:39.917835,lng:119.547606}},
        {content:"第三体育场",title:"第三体育场",imageOffset: {width:0,height:3},position:{lat:39.91136,lng:119.537456}},
        {content:"McDonald",title:"McDonald",imageOffset: {width:0,height:3},position:{lat:39.914071,lng:119.524376}},
        {content:"西区第四组团",title:"西区第四组团",imageOffset: {width:0,height:3},position:{lat:39.91109,lng:119.529065}},
        {content:"燕园餐厅",title:"燕园餐厅",imageOffset: {width:0,height:3},position:{lat:39.917119,lng:119.525086}}
    ];

    function addMark(){
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var myIcon = new BMap.Icon("../img/locate.png",new BMap.Size(32,32),{
                imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
            });
            var marker = new BMap.Marker(point,{
                icon: myIcon
            });
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(-5, 25)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        }
    }

    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }

    function HaversineToDist(lat, lng){

    }

    function MSTPlot(){
        var plotLine = new BMap.PolyLine()
    }
    initMap();
    setMapEvent();
    addMark();

</script>
</body>
</html>